<template>
    <div class="cart_item">
      <div class="cart_column column_1">
        <el-checkbox class="my_el_checkbox" v-model="course.selected"></el-checkbox>
      </div>
      <div class="cart_column column_2">
        <img :src="$settings.Host+course.course_img" alt="">
        <span><router-link :to="`/course/${course.course_id}`">{{course.course_name}}</router-link></span>
      </div>
      <div class="cart_column column_3">
        <el-select v-model="course.expire_time"  size="mini" placeholder="请选择购买有效期" class="my_el_select">
    <el-option v-for="item in course.expire_list" :label="item.text" :value="item.expire" :key="item.expire"></el-option>
        </el-select>
      </div>
      <div class="cart_column column_4">¥{{course.price.toFixed(2)}}</div>
      <div class="cart_column column_4 column_5"><span class="cart_delete" @click="deleteHandle">删除</span></div>
    </div>
</template>

<script>
export default {
    name: "CartItem",
    props:["course","token","course_key","checked"],
    data(){
      return {
        expire: "1个月有效",
      }
    },
    watch:{
        "course.selected": function(){
            this.change_selected();
        },
        "checked":function () {
          this.course.selected = this.checked

        },
         "course.expire_time": function(){
            this.change_expire();
        }
    },


    methods:{
        change_selected(){
            this.$axios.put(`${this.$settings.Host}/cart/`,{
                course_id: this.course.course_id,
                selected: this.course.selected
            },{
                headers:{
                    Authorization: "jwt " + this.token,
                }
            }).then(response=>{
                // this.$message.success("切换勾选状态成功！");
                this.$emit("calc_total")
            }).catch(error=>{
                this.$message.error("切换勾选状态失败！");
            })
        },
        deleteHandle(){
            // 删除商品操作
            this.$axios.delete(`${this.$settings.Host}/cart/`,{
                params:{
                    course_id: this.course.course_id,
                },
                headers:{
                    Authorization: "jwt " + this.token,
                }
            }).then(response=>{
                this.$message.success("删除商品成功！");
                // 告诉父组件删除当前子组件
                this.$emit("del_cart", this.course_key);
            }).catch(error=>{
                this.$message.error("删除商品失败！");
            })
        },
         change_expire() {
             // 切换有效期

             // 修改当前课程的价格
             for (let item of this.course.expire_list) {
                 if (item.expire === this.course.expire_time) {
                     this.course.price = item.price;
                     this.$axios.patch(`${this.$settings.Host}/cart/`, {
                         course_id: this.course.course_id,
                         expire: this.course.expire_time,
                     }, {
                         headers: {
                             Authorization: "jwt " + this.token,
                         }
                     }).then(response => {
                         // 通知父组件重新计算价格
                         this.$emit("calc_total");
                     }).catch(error => {
                         this.$message.error("当前课程的有效期选项切换失败！");
                     });
                 }
             }
         }


    }
}
</script>

<style scoped>
.cart_item::after{
  content: "";
  display: block;
  clear: both;
}
.cart_column{
  float: left;
  height: 250px;
}
.cart_item .column_1{
  width: 88px;
  position: relative;
}
.my_el_checkbox{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}
.cart_item .column_2 {
  padding: 67px 10px;
  width: 520px;
  height: 116px;
}
.cart_item .column_2 img{
  width: 175px;
  height: 115px;
  margin-right: 35px;
  vertical-align: middle;
}
.cart_item .column_3{
  width: 197px;
  position: relative;
  padding-left: 10px;
}
.my_el_select{
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.cart_item .column_4{
  padding: 67px 10px;
  height: 116px;
  width: 142px;
  line-height: 116px;
}
.cart_item .column_5{
  color: #ffc210;
}
.cart_delete{
  cursor: pointer;
}
</style>
